<%--
  Created by IntelliJ IDEA.
  User: 27716
  Date: 2024/10/23
  Time: 10:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>列表</title>
    <script src="../../static/js/jquery-1.8.2.min.js"></script>
    <link rel="stylesheet" href="../../static/css/css.css">
    <script>
        //文档就绪函数（需要提前加载的数据）
        $(function (){
            //1.获取 搜索框的值
            let username = $("#username").val();
            let start = $("#start").val();
            let end = $("#end").val();
            //2.组装对象
            let obj = {username:username,start:start,end:end};
            //ajax 发起异步请求(调用函数)
            getUserList(obj);

        })

        //定义函数 获取用户列表
        function getUserList(obj){
            $.ajax({
                url:"/user/getUserList",
                type:"post",
                data:{reqInfos: JSON.stringify(obj)},
                dataType:"json",
                success(res){
                    console.log(res);
                    $("#table").empty()
                    $("#table").append(`
                    <tr>
                        <td>
                            <input type="checkbox" id="check">
                        </td>
                        <td>编号</td>
                        <td>用户名</td>
                        <td>用户状态</td>
                        <td>入职时间</td>
                        <td>图片</td>
                        <td>操作</td>
                    </tr>
                `)
                    for (let x of res) {
                        $("#table").append(`
                    <tr>
                         <td>
                            <input type="checkbox" class="ck" value="\${x.uid}">
                        </td>
                        <td>\${x.uid}</td>
                        <td>\${x.username}
                        <img src="/file/showImg?imgUrl=\${x.imgUrl}" alt="" width="50" height="50">
                        </td>
                        <td>\${x.state ==0?'启用':'禁用'}</td>
                        <td>\${x.time}</td>
                        <td>
                            <img src="/file/showImg?imgUrl=\${x.imgUrl}" alt="" width="50" height="50">
                        </td>
                        <td>
                            <input type="button" value="删除" onclick="del(\${x.uid})">
                            <input type="button" value="修改" onclick="toUpd(\${x.uid})">
                            <input type="button" value="设置角色" onclick="toSetRole(\${x.uid})">
                        </td>
                    </tr>
                        `)
                    }
                },
                error(){
                    alert("服务器故障，请拨打110")
                }
            })
        }

    </script>
</head>
<body>
<%-- 搜索框（用户名模糊、区间按照日期）--%>
用户名： <input type="text" id="username">
入职区间： <input type="datetime-local" step="1" id="start"> - <input type="datetime-local" step="1" id="end">
<input type="button" value="搜索" id="search">
<input type="button" value="添加" id="add">
<input type="button" value="批量删除" id="delAll">
<table id="table">
    <tr>
        <td>
            <input type="checkbox" id="check">
        </td>
        <td>编号</td>
        <td>用户名</td>
        <td>用户状态</td>
        <td>入职时间</td>
        <td>图片</td>
        <td>操作</td>
    </tr>
</table>

</>
</body>
<script>
    //一个按钮同时实现全选 全不选
    $(document).on('click','#check',function (){
        $(".ck").prop("checked",this.checked)
    })

    //搜索
    $("#search").click(function (){
        //1.获取 搜索框的值
        let username = $("#username").val();
        let start = $("#start").val();
        let end = $("#end").val();
        //2.组装对象
        let obj = {username:username,start:start,end:end};
        //ajax 发起异步请求(调用函数)
        getUserList(obj);
    })

    //添加
    $("#add").click(function (){
        location.href = "add.jsp";
    })

    //修改角色
    function toSetRole(id){
        location.href ="setRole.jsp?uid="+id;
    }

    //删除（单删）
    function  del(uid){
        //友情提示
        if(confirm("您确定要删除吗？")){
            //1.取值（从参数获取） 2.组装对象 3.发起异步请求
            let obj = {uids:uid};
            $.ajax({
                url:"/user/delUser",
                type:"post",
                data:{reqInfos: JSON.stringify(obj)},
                dataType: "json",
                success(res) {
                    console.log(res)
                    if(res===200){
                        alert("删除成功")
                        location.reload() //刷新链表
                    }
                },
                error() {
                    alert("删除失败,滚出去")
                }
            })
        }
    }


    //批删
    $("#delAll").click(function () {
        //1.取值 2.组装对象 3.发起异步请求
        //获取 选中的复选框 ，循环获取每一个 复选框
        let arr = [];
        $(".ck:checked").each(function () {
            let uid = $(this).val();
            arr.push(uid);
        })
        //将数组传 字符串
        let uids = arr.join(",");
        if (!uids) {
            alert("请选择要删除的数据")
            return;
        }
        //调用 单删函数
        del(uids);
    })
    //去修改页面
    function toUpd(uid){
        location.href = "upd.jsp?uid="+uid;
    }
</script>
</html>
